<template lang="html">
    <div>
        <div class="scroll-list-wrap" :style="{height:getWindowHeight+'px'}">
            <cube-scroll
              ref="scrolls"
              :data="friendsList"
              :options="options"
              @pulling-up="onPullingUp">
                <div class="head" :style="head">
                    <div>
                        <div class="user_box">
                            <img v-if="$store.state.userInfo.headimgurl" :src="$store.state.userInfo.headimgurl" alt="">
                            <img v-else :src="userimg" alt="">
                        </div>
                        <p v-if="$store.state.userInfo.nickname" class="user_name">{{$store.state.userInfo.nickname}}</p>
                        <p v-else class="user_name">小壹-01</p>
                    </div>
                </div>
                <div class="nav">
                    <div class="item">
                        <p class="number_p">{{fan_count}} <span>位</span> </p>
                        <p>粉丝总数</p>
                    </div>
                    <div class="item">
                        <p class="number_p">{{today_count}} <span>位</span> </p>
                        <p>今日涨粉</p>
                    </div>
                    <div class="item">
                        <p class="number_p">{{benefit_log}} <span>元</span> </p>
                        <p>赚取提成</p>
                    </div>
                </div>
                <div class="hr_box">
                </div>
                <div class="panel">
                    <div class="nan">
                        好友列表
                    </div>
                    <div class="nan_box">
                        <p v-if="friendsList.length == 0" style="margin-top:1rem">没有更多数据了</p>
                        <ul>
                            <li class="list" v-for="item in friendsList">
                                <div class="friend_img">
                                    <img :src="item.headimgurl" alt="">
                                </div>
                                <p class="friend_name">{{item.nickname}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
import userimg from '@/assets/lingyi_logo@2x.png'
export default {
    data(){
        return{
            head:{
                backgroundImage: "url(" + require("../../assets/page7_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            fan_count:"",
            today_count:"",
            benefit_log:"",
            friendsList:[],
            userimg,
            page:1,
            pullUpLoad: true,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: '上拉加载更多',
            pullUpLoadNoMoreTxt: '没有更多数据喔~'
        }
    },
    metaInfo: {
      title: "推荐的好友列表"
     },
    methods:{
        //获取粉丝列表
        getFriendList(){
            let that = this;
            const toast = that.$createToast({
                time: 1000,
                txt: ''
              })
              toast.show()
            let url = "/fang/personal/fans";
            that.$axios.post(url,that.$qs.stringify({
                access_token:that.$store.state._token01,
                page:that.page
            }))
            .then(function(response){
                toast.hide();
                let res = response.data;
                if(res.status == 1){
                    that.fan_count = res.data.fan_count;
                    that.today_count = res.data.today_count;
                    that.benefit_log = res.data.benefit_log;

                    if(res.data.item.data.length > 0){
                        that.page += 1;
                        that.friendsList = that.friendsList.concat(res.data.item.data);

                    }else{
                        // 如果没有新数据
                        that.$refs.scrolls.forceUpdate();
                    }
                }else if (res.status == -1) {
                    that.noLogin();
                }else{
                    that.toast = that.$createToast({
                      txt: res.msg,
                      type: 'txt'
                    })
                    that.toast.show()
                }
            })
            .catch(function(error){
                console.log(error);
                that.toast = that.$createToast({
                  txt: error.toString(),
                  type: 'txt'
                })
                that.toast.show()
            });
        },
        onPullingUp() {
            this.getFriendList();
          // 更新数据
        },
    },
    mounted(){
        this.getFriendList();
    },
    computed: {
       options() {
         return {
             pullUpLoad: this.pullUpLoadObj,
             scrollbar: false
         }
       },
        getWindowHeight(){
          return document.documentElement.clientHeight || document.body.clientHeight;
      },
      //上拉配置
      pullUpLoadObj: function() {
          return this.pullUpLoad ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          } : false
        }
    }
}
</script>

<style lang="css" scoped>
.fl{
    display: flex;
}
.head{
    height: 7.96rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head .user_box{
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border:.08rem solid #ffffff;
    box-shadow: 0 0.16rem 0.24rem #1ca48a;
}
.head .user_box img{
    width: 100%;
    height: auto;
}
.head .user_name{
    font-size: .6rem;
    color: #ffffff;
    font-weight: 500;
    margin-top: .22rem;
}
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.42rem;
}
.nav .item{
    flex: 1;
}
.nav .item .number_p{
    font-size: .84rem;
    color: #212121;
    margin-bottom: .14rem;
}
.nav .item .number_p > span{
    font-size: .48rem;
    margin-left: -.15rem;
}
.nav .item > p{
    font-size: .48rem;
    color: #8B8B8B;
}
.hr_box{
    height: .36rem;
    background:rgba(243,244,245,1);
}
.panel{
    overflow: scroll;
}
.panel .nan{
    padding: 0 .43rem;
    margin: .52rem 0 .12rem 0;
    font-size: .52rem;
    color: #272727;
    text-align: left;
}
.panel .nan_box{
    /* padding:0 .16rem; */
}
.panel .nan_box ul{
    display: flex;
    flex-wrap: wrap;
}
.panel .nan_box ul .list{
    width: 3.68rem;
    height: 2.32rem;
    margin-top: .6rem;
}
.panel .nan_box .list .friend_img{
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 auto;
    border-radius: 50%;
}
.panel .nan_box .list .friend_img img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.panel .nan_box .list .friend_name{
    font-size: .44rem;
    color: #333333;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
    text-align: center;
    margin-top: .16rem;
}

</style>
<style lang="stylus" rel="stylesheet/stylus">
.cube-scroll-content
    display: block !important
</style>
